<template>
  <div style="background-color: #000">
    <section class="container-login">
      <div class="wrap-login layui-anim layui-anim-up">
        <form class="login-form validate-form layui-form" :model="user">
          <span class="login-form-title">
            登录账号
          </span>
          <div class="wrap-input validate-input">
            <!-- <img src="/static/login/我 的@2x.png" class="login_img"> -->
            <input class="input" type="text" name="phone" placeholder="请输入手机号" lay-verify="required"
              v-model="user.mobile" id="phone">
            <span class="focus-input"></span>
            <span class="symbol-input100">
              <i class="el-icon-user" style="margin-left:-20px;font-size:20px"></i>
            </span>
          </div>

          <div class="wrap-input validate-input" style="margin-top: 30px;">
            <!-- <img src="/static/login/login_pwd@2x.png" class="login_img"> -->
            <input class="input" type="password" name="password" placeholder="请输入密码" lay-verify="required"
              v-model="user.password" id="password">
            <span class="focus-input"></span>
            <span class="symbol-input100">
              <i class="el-icon-lock" style="margin-left:-20px;font-size:20px"></i>
            </span>
          </div>

          <div class="container-login-form-btn">
            <input class="login-form-btn" :value="loadingLogintext" type="button" lay-submit lay-filter="login"
              @click="submitFrom()" :loading="loadingLogin">
          </div>

          <div class="text-center p-t-12">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="记住密码，下次快速登录"></el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="text-center p-t-136">
            <a class="txt1" href="/#/register">免费注册</a><span style="color:#a6a5a5">|</span><a href="/#/forgotPwd"
              class="txt1" style="color:#a6a5a5">忘记账号密码？</a>
          </div>
        </form>
      </div>
    </section>
  </div>
</template>

<script>
  import activity from "@/components/Yee/Yee"; //弹窗组件
  import contact from "@/components/common/contact"; //浮动窗体
  import Yeepass from '@/tools/pass';
  import axios from 'axios';
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      activity,
      contact
    },
    data() {
      //这里存放数据
      return {
        //login
        loadingLogin: false, //登录加载中
        loadingLogintext: '登录',
        url: '',
        checkList: ['选中且禁用', '复选框 A'],
        user: {
          mobile: '',
          password: '',
        },
        object: {},
        rules: {
          mobile: [{
              required: true,
              message: '请输入手机号',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
        },
      };

    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      submitFrom() {
        var phone = document.getElementById('phone').value;
        var pwd = document.getElementById('password').value;
        if (phone == '' && pwd == '') {
          this.$message.error({
            message: '手机号或密码不能为空',
            type: 'error',
            duration: 1000
          });
          return;
        } else if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))) {
          this.$message.error({
            message: '请输入正确的手机号',
            type: 'error',
            duration: 1000

          });
          return;
        } else if (!(/^.{6,18}$/).test(pwd)) {
          this.$message.error({
            message: '请输入至少6-18位的密码',
            type: 'error',
            duration: 1000

          });
          return;
        } else {
          let objs = Yeepass.jiami(JSON.stringify(this.user))
          sessionStorage['objs'] = objs;
          sessionStorage['token'] = objs;
          this.$post(this.API.UserLogin, {}).then((res) => {
            if (res.code === 1) {
              this.loadingLogin = true, //登录加载中
                this.loadingLogintext = '登录中...'
              console.log(res);
              //存储token，以后所有的请求，都需要此token进行验证
              sessionStorage['token'] = res.data.userinfo.token;
              sessionStorage['token_time'] = new Date().getTime();
              sessionStorage['username'] = res.data.userinfo.username;
              //登录成功，跳转到首页
              this.$message.success({
                message: '登录成功',
                type: 'success',
                duration: 1000

              });
              this.$EventBus.$emit("userLogined", 1);
              this.$router.push({
                path: '/home',
                name: 'home'
              })
              this.$EventBus.$emit("loginStatusChange", {
                status: true
              });
              location.reload();
            } else {
              this.loadingLogin = false,
                this.loadingLogintext = '登录'
            }
          })
        }
      },
      goUrl(path, name) {
        // 点击tab后触发事件，修改显示页面，将状态保存在sessionStorage里面
        this.$router.push({
          path: path,
          name: name,
        });
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      //替换样式
      $('#dvHeader').css('height', '60px');
      $('#dvHeader').css('color', 'black');
      $("header").addClass("navbar-default");
      $('#logo-img').attr('src', '../../../static/home/logologin.png');
      //回车登录
      var _self = this;
      document.onkeydown = function (e) {
        var key = window.event.keyCode;
        if (key == 13 || key == 100) {
          _self.submitFrom();

        }

      };
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      let name = sessionStorage.getItem("currentTab_title");
      // 判断是否存在currentTab，即tab页之前是否被点击切换到别的页面
      if (name) {
        this.currunt_index_name = name;
      }
      // console.log(this.$route.name);
      this.currunt_index_name = this.$route.name
      let that = this;
      // 由打包APP--生成安装包页面传过来的事件
      that.$root.$on("goMyapp", function () {
        console.log('上传app到我的应用');
        that.goUrl('/adhibition', 'adhibition')
      })
      // 由打包APP--生成安装包页面传过来的事件
      that.$root.$on("goMysuper", function () {
        console.log('上传app到超级签名');
        that.goUrl('/signatureSuper', 'signatureSuper')
      });
    },
  };

</script>
<style scoped>
  .container-login {
    width: 100%;
    min-height: auto;
    align-items: center;
    padding: 15px;
    background-image: url("../../../static/login/denglubk.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position-y: 50px;
  }

  .wrap-login {
    margin-top: 100px;
    margin-bottom: 200px;
    width: 420px;
    height: 500px;
    background: rgba(10, 10, 10, 0.8);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    left: 60vw;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    border: 1px solid #f9761f;

  }

  /* a {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
  } */

  a:focus {
    outline: none !important;
  }

  a:hover {
    color: #fff;
  }

  /* p {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
  } */

  ul,
  li {
    margin: 0px;
    list-style-type: none;
  }

  /*---------------------------------------------*/
  input {
    outline: none;
    border: none;
  }

  textarea {
    outline: none;
    border: none;
  }

  textarea:focus,
  input:focus {
    border-color: transparent !important;
  }

  input:focus::-webkit-input-placeholder {
    color: transparent;
  }

  input:focus:-moz-placeholder {
    color: transparent;
  }

  input:focus::-moz-placeholder {
    color: transparent;
  }

  input:focus:-ms-input-placeholder {
    color: transparent;
  }

  textarea:focus::-webkit-input-placeholder {
    color: transparent;
  }

  textarea:focus:-moz-placeholder {
    color: transparent;
  }

  textarea:focus::-moz-placeholder {
    color: transparent;
  }

  textarea:focus:-ms-input-placeholder {
    color: transparent;
  }

  input::-webkit-input-placeholder {
    color: #999999;
  }

  input:-moz-placeholder {
    color: #999999;
  }

  input::-moz-placeholder {
    color: #999999;
  }

  input:-ms-input-placeholder {
    color: #999999;
  }

  textarea::-webkit-input-placeholder {
    color: #999999;
  }

  textarea:-moz-placeholder {
    color: #999999;
  }

  textarea::-moz-placeholder {
    color: #999999;
  }

  textarea:-ms-input-placeholder {
    color: #999999;
  }

  /*---------------------------------------------*/
  button {
    outline: none !important;
    border: none;
    background: transparent;
  }

  button:hover {
    cursor: pointer;
  }

  iframe {
    border: none !important;
  }


  .txt1 {
    font-family: Poppins-Regular;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    color: #f6781f;
  }

  .txt2 {
    font-family: Poppins-Regular;
    font-size: 13px;
    line-height: 1.5;
    color: #a6a5a5;
    text-decoration: none;
  }

  .p-t-12 {
    padding-top: 12px;
  }

  .p-t-136 {
    padding: 60px 0px 35px 0px;
    margin-left: 130px;



  }

  .text-center {
    text-align: center;

  }

  .text-center a {
    margin: 0px 5px;
    font-size: 13px;
  }

  .limiter {
    width: 100%;
    margin: 0 auto;
  }



  /*------------------------------------------------*/

  .login-pic {
    width: 316px;
  }

  .login-pic img {
    max-width: 100%;
  }

  .symbol-input100 {
    font-size: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    position: absolute;
    border-radius: 25px;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 35px;
    pointer-events: none;
    color: #666666;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }

  .symbol-input {
    font-size: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    position: absolute;
    border-radius: 25px;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 35px;
    pointer-events: none;
    color: #e6e6e6;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }

  /* .input:focus + .focus-input + .symbol-input {
  color: #ffe14e;
  padding-left: 28px;
} */
  /*----------------------------------------------*/
  .login-form {
    width: 320px;
  }

  .login-form-title {
    text-align: center;
    width: 100%;
    display: block;
    font-size: 20px;
    font-weight: 800;
    margin-top: 30px;
    margin-bottom: 50px;
    color: #ccc;
  }

  /*---------------------------------------------*/
  .wrap-input {
    position: relative;
    width: 100%;
    z-index: 1;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    border-radius: 21px;
    background: #000;
    border: 1px solid #f9761f;
  }

  .login_img {
    width: 28px;
    height: 28px;
    margin: 0px 0px 0px 14px;
  }

  .input {
    font-family: Poppins-Medium;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    display: block;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border-radius: 25px;
    /* margin: 0px 0px 0px 40px; */
    padding: 0 10px 0 40px;
  }


  /* 按钮 */
  .container-login-form-btn {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 30px;
  }

  .login-form-btn {
    font-family: Montserrat-Bold;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    text-transform: uppercase;
    width: 100%;
    height: 42px;
    border-radius: 21px;
    background: -webkit-linear-gradient(-135deg, #FF7226, #FF9D68);
    background: -o-linear-gradient(-135deg, #FF7226, #FF9D68);
    background: -moz-linear-gradient(-135deg, #FF7226, #FF9D68);
    background: linear-gradient(-135deg, #FF7226, #FF9D68);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }

  /* .login-form-btn:hover {
    background: #333333;
  } */

  .el-checkbox__input {
    margin-top: 50px;
  }

  div>>>.el-checkbox__label {
    font-size: 12px;
    margin-top: 30px;
    color: #fff;

  }

  div>>>.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #fff;

  }

  div>>>.el-checkbox__input .el-checkbox__inner {
    border-radius: 50%;
  }

  div>>>.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #f6781f;
    border: #f6781f;
    border-radius: 50%;
  }

  div>>>.el-checkbox__input.is-checked .el-checkbox__inner::after {
    left: 5px;
    top: 2px;
  }

  /* 媒体查询 */

  @media (max-width: 992px) {
    .wrap-login {
      padding: 67px 90px 33px 85px;
    }

    .login-pic {
      width: 35%;
    }

    .login-form {
      width: 100%;
    }

    .login-form-title {
      margin-top: 0px;
    }
  }

  @media (max-width: 768px) {
    .wrap-login {
      padding: 100px 80px 33px 80px;
    }

    .login-pic {
      display: none;
    }

    .login-form {
      width: 100%;
    }

    .login-form-title {
      margin-top: -20px;
    }
  }

  @media (max-width: 576px) {
    .wrap-login {
      padding: 100px 15px 33px 15px;
    }

    .login-form-title {
      margin-top: -20px;
    }
  }

</style>
